<template>
	<view>
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian" style="height: 100%;display: flex;flex-direction: column;">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">自助广告</text>
						<image @tap="close" style="width: 21rpx;height: 21rpx;" src="/static/img/close.png">
						</image>
					</view>

					<view class="scrollAuto" style="flex: 1;overflow: auto;">
						<view class="reportTitle">
							<text>推广流量</text>
						</view>
						<view class="toutiaoWrap">
							<text class="toutiao">
								<text 
									style="font-weight: bold;font-size: 42rpx;color: #ff6666;">≥{{getMoneys * 20 || moneyList[moneyListIndex] && moneyList[moneyListIndex].name*20}}点击量</text>
							</text>
						</view>
						<view class="reportTitle">
							<text>投放金额</text>
						</view>
						<view  class="toutiaoMoneyWrap">
							<view @tap="touchMoney(index)" v-for="(item,index) in moneyList" :key="index"
								class="toutiaoMoney" :class="{toutiaoMoneys:moneyListIndex==index}">{{item.name}}</view>
							<view v-if="moneyListIndex!=2" @tap="touchMoney(2)" class="toutiaoMoney">自定义</view>
							<input v-else class="toutiaoMoney" type="number" focus v-model="getMoneys" />
						</view>
						<view class="xieyi">点击视为同意<text style="color: #4080FF;">《服务协议》</text></view>
						<view @tap="openToutiao" class="reportRecord">
							<text style="color: #262626;font-size: 28rpx;font-weight: bold;">广告记录</text>
							<image style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
								src="/static/img/chevronRight.png"></image>
						</view>
						<view class="typeWrap">
							<view @tap="chooseType(item)" v-for="(item,index) in paymentChannels" :key="index"
								class="type">
								<view class="types">
									<image class="typeImg" :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix">
									</image>
									<text class="typeText">{{item.name}}</text>
								</view>
								<view class="types types1">
									<image class="chooseType"
										:src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
										mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="moneyWraps">
						<view class="moneyWrap">
							<view style="display: flex;flex-direction: column;">
								<text style="color: #262626;font-size: 24rpx;">实付现金（元）</text>
								<text
									style="color: #FF263F;font-size: 36rpx;font-weight: 36rpx;">{{touchLocalIndex==0?getMoneys:getMoneyss}}</text>
							</view>
							<view @tap="zhifu" class="liji">立即支付</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="toutiaoPop" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">广告记录({{data.total}})</text>
						<image @tap="toutiaoPop.close()" style="width: 21rpx;height: 21rpx;"
							src="/static/img/close.png">
						</image>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="scrolltolower" class="reportPopupWrap">
					<view v-for="(item, index) in data.list" :key="index" class="hongbao-card">
						<view class="card-content">
							<view class="card-title">商品：{{item.productName}}</view>
							<view class="card-item">
								<text class="label">广告编号：</text>
								<text class="value">{{ item.adviceNumber }}</text>
							</view>
							<view class="card-item">
								<text class="label">支付金额：</text>
								<text class="value money">{{ item.payAmount }}</text>
							</view>
							<view class="card-item">
								<text class="label">剩余流量：</text>
								<text class="value">{{ item.balance }}</text>
							</view>
							<view class="card-item">
								<text class="label">时间：</text>
								<text class="value">{{ item.createTime }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { paySpuHot,pageSpuHotHistory } from '@/utils/api/goods.ts';
	import { paymentChannels, payment } from '@/utils/index'
	const data = reactive<any>({
		payChannel: paymentChannels[0].value,
		page: { pageNo: 1, pageSize: 10 },
		onConfirm: () => { },
	})
	// 关闭返回
	const close = () => {
		uni.navigateBack()
	}
	// 推广设置
	const localList = ref([{
		name: '全国',
		key: 'NATIONAL'
	}, {
		name: '本地',
		key: 'LOCAL'
	}])
	const touchLocalIndex = ref(0)
	const touchLocal = (index : number) => {
		touchLocalIndex.value = index
	}
	const trendsId = ref('')
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const toutiaoVal = ref()  //当前头条值
	const moneyList = ref([{
		name: '￥20',
		key: '20'
	}, {
		name: '￥50',
		key: '50'
	}])
	const moneyLists = ref([{
		name: '￥100',
		key: '100'
	}, {
		name: '￥500',
		key: '500'
	}])
	const moneyListIndex = ref(0)
	const moneyListIndexs = ref(0)
	const getMoneys = ref('20')
	const getMoneyss = ref('100')
	const touchMoney = (index : number) => {
		moneyListIndex.value = index
		if (index == 2) {
			getMoneys.value = ''
		} else {
			getMoneys.value = moneyList.value[index].key
		}
	}
	const touchMoneys = (index : number) => {
		moneyListIndexs.value = index
		if (index == 2) {
			getMoneyss.value = ''
		} else {
			getMoneyss.value = moneyLists.value[index].key
		}
	}
	const toutiaoPop = ref<InstanceType<typeof Popup> | null>(null);
	const openToutiao = () => {
		data.page.pageNo = 1;
		requstList()
		toutiaoPop.value.open('bottom')
	}
	const chooseTypeIndex = ref<number | null>(null)
	const chooseType = (item) => {
		data.payChannel = item.value
		// typeList.value.map((item : any) => {
		// 	item.key = false
		// })
		// typeList.value[index].key = true
		// chooseTypeIndex.value = index
	}
	const zhifu = async () => {
		
		const data1 = {
			payAmount: touchLocalIndex.value == 0 ? getMoneys.value : getMoneyss.value,
			payChannel: data.payChannel,
			spuId: trendsId.value
		}
		if (data.payChannel == 'WALLET') {
			data.show1 = true;
			data.onConfirm = async (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await paySpuHot({ data: { ...data1, payPwd: e } })
				if (res.code == 200) {
					payment(data.payChannel, res.data).then((res) => {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
					uni.hideLoading()
				}
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const res = await paySpuHot({ data: data1 })
		if (res.code == 200) {
			payment(data.payChannel, res.data).then((res) => {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			})
			uni.hideLoading()
		}
	}
	const bendiNum = ref(0)
	const bendi = () => {
		bendiNum.value = Number(getMoneys.value) * 50
		return bendiNum.value
	}
	const quanguoNum = ref(0)
	const quanguo = () => {
		quanguoNum.value = Number(getMoneyss.value) * 2
		return quanguoNum.value
	}
	const requstList = () => {
		if (data.page.pageNo == 1) {
			data.list = [];
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		pageSpuHotHistory({ data: data.page }).then((res) => {
			data.list = [...data.list, ...res.data.list];
			data.total = res.data.total;
			uni.hideLoading()
		})
	}
	const scrolltolower = () => {
		if (data.total != data.list.length) {
			data.page.pageNo += 1;
			requstList()
		}
	}
	onLoad(async (option) => {
		trendsId.value = option.id;
		setTimeout(()=>{
			popup.value.open('bottom')
		})
	})
</script>

<style>
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popups {
		width: 100%;
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.reportPopup {
		width: 100%;
		height: 82vh;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.reportPopup scroll-view {
		flex: 1;
		overflow: auto;
	}

	.popupMian {
		width: 94%;
		margin-left: 3%;
		position: relative;
	}

	.popupTitle {
		width: 100%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.reportTitle {
		width: 100%;
		height: 54rpx;
		color: #262626;
		margin-top: 32rpx;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.toutiaoWrap {
		width: 100%;
		height: 160rpx;
		border-radius: 24rpx;
		margin-top: 24rpx;
		border: 2rpx solid #FF263F;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.toutiao {
		color: #FF263F;
		font-size: 28rpx;
	}

	.toutiaoMoneyWrap {
		width: 100%;
		display: flex;
		margin-top: 24rpx;
	}

	.toutiaoMoney {
		width: 160rpx;
		height: 66rpx;
		background: #F4F6FA;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #262626;
		font-weight: bold;
		margin-right: 32rpx;
		text-align: center;
	}

	.toutiaoMoneys {
		background: #FFDED3;
		color: #FF263F;
	}

	.xieyi {
		font-size: 28rpx;
		font-weight: bold;
		color: #262626;
		margin-top: 32rpx;
	}

	.reportRecord {
		width: 199rpx;
		height: 66rpx;
		border-radius: 33rpx;
		border: 2rpx solid #CCCCCC;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.moneyWraps {
		width: 100%;
		height: 106rpx;
		margin-top: 32rpx;
		border-top: 2rpx solid #F4F6FA;
	}

	.moneyWrap {
		width: 92%;
		height: 106rpx;
		margin-left: 4%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.typeWrap {
		width: 92%;
		margin-top: 32rpx;
		margin-left: 4%;
		border-top: 1rpx solid #F4F6FA;
	}

	.type {
		width: 100%;
		height: 64rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.types {
		height: 64rpx;
		display: flex;
		align-items: center;
	}

	.types1 {
		image {
			width: 36rpx;
		}
	}

	.typeImg {
		width: 48rpx;
	}

	.typeText {
		color: #262626;
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	.chooseType {
		width: 36rpx;
		height: 36rpx;
	}

	.liji {
		width: 190rpx;
		height: 80rpx;
		background: #FF263F;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #fff;
	}

	/* 卡片整体样式 */
	.reportCard {
		background-color: #ffffff;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin: 16px;
		padding: 16px;
		overflow: hidden;
	}

	/* 卡片标题样式 */
	.reportCardTitle {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
		color: #333;
	}

	/* 卡片内容样式 */
	.reportCardContent {
		font-size: 16px;
		color: #666;
		margin-bottom: 16px;
	}

	/* 图片包裹器样式 */
	.reportCardImgWrap {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.reportCardImg {
		width: 200rpx;
		height: 200rpx;
	}

	.hongbao-card {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		width: 93%;
		margin-left: 4%;
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.card-content {
		padding: 16px;
	}

	.card-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;
		color: #333;
	}

	.card-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
		color: #666;
	}

	.label {
		font-size: 14px;
		font-weight: bold;
		color: #999;
		min-width: 60px;
	}

	.value {
		font-size: 16px;
		color: #333;
	}

	.money {
		color: #ff6347;
	}
</style>